<!--
Copyright 2010 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <style type="text/css" media="all">@import "/css/diffview.css";</style>
    <style type="text/css">
      body {
        background-color: #F2F9FF;
        font-family: Helvetica, Arial, sans-serif;
      }
      h1 {
        font-size: 24px;
        font-weight: bold;
        padding-left: 5px;
        color: #484848;
      }
      h3.successful {
        font-weight: bold;
        font-size: 24px;
        color: #0F0;
        text-shadow: 1px 1px 0px #333;
      }
      h3.partial {
        font-weight: bold;
        font-size: 24px;
        color: #FF0;
        text-shadow: 1px 1px 0px #333;
      }
      h3.failure, span.warning {
        color: #F00;
      }
      h3.failure {
        font-weight: bold;
        font-size: 24px;
        text-shadow: 1px 1px 0px #333;
      }
      span.em {
        font-style: italic;
        font-weight: bold;
      }
      div#payload_wrapper {
        display: none;
      }
      h3,h4,h5 {
        padding: 2px;
        margin: 0px;
        color: #484848;
      }
      p {
        padding: 0px;
        margin: 0px 3px;
      }
      p.desc {
        padding-bottom: 5px;
      }
      span.important {
        font-weight: bold;
      }
      #warnings, #warnings a, #warnings a:visited {
        color: #F00;
      }
      #warnings h3 {
        color: #F00;
      }
      #warnings th {
        text-align: left;
      }
      #warnings th.line {
        padding-right: 10px;
      }
      #warnings td {
        vertical-align: top;
      }
      #warnings div.annotation {
        padding-bottom: 5px;
      }
    </style>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      // Load jQuery
      google.load("dojo", "1.3.2");
    </script>
    <script type="text/javascript" src="/js/difflib.js"></script>
    <script type="text/javascript" src="/js/diffview.js"></script>
    <script type="text/javascript">
    var original = {{ raw }}.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    var migrated = {{ migrated }}.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

    var $ = dojo.byId;

    // JS diff code from http://snowtide.com/jsdifflib#usingjs
    function diffWithJS() {
      var base = difflib.stringAsLines(original);
      var newtxt = difflib.stringAsLines(migrated);
      var sm = new difflib.SequenceMatcher(base, newtxt);
      var opcodes = sm.get_opcodes();
      var diffoutputdiv = $("diffoutput");
      while (diffoutputdiv.firstChild) diffoutputdiv.removeChild(diffoutputdiv.firstChild);
      var contextSize = null;
      contextSize = contextSize ? contextSize : null;
      diffoutputdiv.appendChild(diffview.buildView({ baseTextLines:base,
                                newTextLines:newtxt,
                                opcodes:opcodes,
                                baseTextName:"Original",
                                newTextName:"Migrated",
                                contextSize:contextSize,
                                viewType: true}));
    }

    dojo.extend(dojo.NodeList, {
      show: function(){
        this.forEach( item.style.display = 'block' );
        return this;
      },
      hide: function(){
        this.forEach(function(item){
          item.style.display = 'none';
        });
        return this;
      },
      toggle: function(){
        this.forEach(function(item){
          if(item.style.display == 'none'){
            item.style.display = 'block';
          } else {
            item.style.display = 'none';
          }
        });
        return this;
      }
    });

    </script>
  </head>
  <body>
    <div id="header">
      {% if warning %}
        <h3 class="failure">Migration failed</h3>
        <div id="warnings">
          <p>{{ warning }}</p>
        </div>
        <p><a href="/">Go back</a></p>
      {% else %}
        {% if annotations %}
          <h3 class="partial">Migration incomplete</h3>
          <p>Migration has partially completed. Please review the following warnings about your gadget. <span class="important">Additional manual changes are required for your gadget to completely support the <code>gadgets.* API</code>.</span></p>
          <div id="warnings">
            <h3>Warnings:</h3>
            <table border="0">
              <tr>
                <th class="line">Line</th>
                <th>Message</th>
              </tr>
            {% for annotation in annotations %}
              <tr>
                <td>{{ annotation.0 }}</td>
                <td>
                {% for item in annotation.1 %}
                <div class="annotation">{{ item }}</div>
                {% endfor %}
                </td>
              </tr>
            {% endfor %}
            </table>
          </div>
        {% else %}
          <h3 class="successful">Migration successful</h3>
          <p>Migration has completed.</p>
        {% endif %}
      {% endif %}
    </div>
    {% if not warning %}
    <div><a href="javascript:return void(0);" onclick="dojo.query('#rawoutput').toggle();">Raw</a></div>
    <div id="rawoutput" style="width:100%">
      <textarea rows="30" style="width: 100%;" readonly>{{ migrated_text }}</textarea>
    </div>
    <div><a href='javascript:return void(0);' onclick="dojo.query('#diffoutput').toggle();">Diff</a></div>
    <div id="diffoutput" style="width:100%"> </div>
    <script type="text/javascript">
      diffWithJS();
    </script>
    {% endif %}
  </body>
</html>
